import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
} from 'react-native';


import Constants from '../../common/Constants';
import Config from '../../config';
import {DateUtils} from '../../utils/Utils';
import TImage from '../../components/TImage';
import SizeUtils from '../../common/SizeUtils';

import BaseItem from '../common/BaseItem';

export default class QuanziItemView extends BaseItem {
    render() {
        return (
            <View activeOpacity={0.3} underlayColor="#eeeeee"
              style={{backgroundColor:"#ffffff",
              width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80),
              marginLeft:SizeUtils.translateDesignWidthToCode(40),
              marginRight:SizeUtils.translateDesignWidthToCode(40),
              borderBottomWidth:this.props.data.title ? SizeUtils.translateDesignNumToCode(3) : 0,
              borderColor:"#eeeeee",
              paddingBottom:SizeUtils.translateDesignHeightToCode(20),
                }}>
                <View style={{flex:1, flexDirection:"row",
                  paddingTop:SizeUtils.translateDesignHeightToCode(20),}}>
                  {this._renderAvatarContent(this.props.data)}
                  <View style={{
                    flex:2, paddingTop:SizeUtils.translateDesignHeightToCode(20),
                    paddingBottom:SizeUtils.translateDesignHeightToCode(10),
                   }}>
                    <Text style={{
                      fontSize:SizeUtils.translateFontSizeToCode(32),
                      color:"#333",
                      }}>
                      {this.props.data.title}
                    </Text>
                    {this._renderText(this.props.data)}
                  </View>
                  {this._renderBottomText(this.props.data)}
                </View>
            </View>
        );
    }

    _renderAvatarContent(data) {
      // console.log('list-data-abc' , data)
      if( data.image_urls && data.image_urls.length > 0) {
        return (
          <View style={{
              marginRight:SizeUtils.translateDesignWidthToCode(20),
              width:SizeUtils.translateDesignWidthToCode(100), height:SizeUtils.translateDesignWidthToCode(100) }}>
            <TImage style={{width:100, height:100}}
              source={{uri:data.image_urls[0]}} />
          </View>
        )
      }else{
        return (
          <View style={{
              marginRight:SizeUtils.translateDesignHeightToCode(20),
              width:SizeUtils.translateDesignWidthToCode(138), height:SizeUtils.translateDesignWidthToCode(100) }}>
            <TImage style={{width:100, height:100}} source={require("../../../resource/images/quanzi/_tmp/02.png")} />
          </View>
        )
      }
    }

    _renderText(data) {
      // return <Text></Text>
      return(
        <View style={{marginTop:SizeUtils.translateDesignHeightToCode(10),
        }}>
          <Text style={{
            lineHeight:SizeUtils.translateDesignHeightToCode(28),
            fontSize:SizeUtils.translateFontSizeToCode(24),
            color: '#cccccc',
          }}>{data.desc}</Text>
        </View>
      )
    }

    _renderBottomText(data) {
      var top = (!data.image_urls || data.image_urls.length == 0) ? 20 : 30;
      return (
        <View style={{
            flexDirection:"row",
            justifyContent:"space-between",
            alignItems: "center",
            }}>
            <TImage source={require("../../../resource/images/quanzi/list_icon_people.png")}
              style={{width:22, height:24}}/>
            <Text style={{
              marginLeft:SizeUtils.translateDesignHeightToCode(10),
              marginRight:SizeUtils.translateDesignHeightToCode(36),
              fontSize:SizeUtils.translateFontSizeToCode(26), color:"#999999",}}>{this.props.data.favoriters_num}</Text>
            <TImage source={require("../../../resource/images/home/jianyi.png")}
              style={{width:16, height:28}}/>
          {/*<Text style={{fontSize:SizeUtils.translateFontSizeToCode(26), color:"#999999",}}>{this._getDateSource(data)}</Text>*/}
          {/*<Text style={{fontSize:SizeUtils.translateFontSizeToCode(26), color:"#999999",}}>{DateUtils.formatDate2(data.posted_at)}</Text>*/}
        </View>
      )
    }

    _getDateSource(data) {
      if(data.source) {
        return "来自:" + data.source;
      }
      return "";
    }
}
